<template>
    <div class="templateImg-container" :style="{ width: data.width + 'px' }">
        <div class="loading-template" v-if="data.loading">
            <div class="loading-img" :style="{ height: data.height + 'px' }"></div>
            <div class="loading-footer">
                <div class="loading-title"></div>
                <div class="loading-user"></div>
            </div>
        </div>

        <div v-else>
            <div class="img" :style="{ height: data.height + 'px', background: data.bgColor }"></div>
            <div class="footer">
                <div class="title">{{ data.title }}</div>
                <div class="user">
                    <div class="avatar" :style="{ background: data.bgColor }"></div>
                    <span class="name">{{ data.author }}</span>
                    <div class="like">
                        <i class="iconfont icon-xiaohongshuhuozan icon-size-small"></i>
                        <span>{{ computedLikeCount(data.likeCount) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ICardItem } from '@/type/interface'

defineProps<{
    data: ICardItem
}>()

const computedLikeCount = (num: number) => {
    if (num < 1000) {
        return '100+'
    }
    if (num >= 1000 && num < 10000) {
        return '1k+'
    }
    if (num >= 10000 && num < 100000) {
        return '1w+'
    }
    if (num >= 100000) {
        return '10w+'
    }
}
</script>

<style scoped lang="scss">
.templateImg-container {
    .img {
        border-radius: 16px;
        width: 100%;
    }

    .footer {
        font-size: 14px;
        padding: 12px;

        .title {
            margin-bottom: 8px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: rgba(51, 51, 51, 0.8);
        }

        .user {
            display: flex;
            align-items: center;
            height: 20px;
            font-size: 12px;

            .avatar {
                border-radius: 50%;
                margin-right: 8px;
                height: 20px;
                width: 20px;
            }

            .like {
                margin-left: auto;

                i {
                    margin-right: 2px;
                }
            }
        }
    }

    .loading-template {

        .loading-img{
            background-color: var(--color-active-background);
            border-radius: 16px;
        }


        .loading-footer {
            padding-top: 12px;

            .loading-title {
                height: 15px;
                width: 70%;
                margin-bottom: 8px;
                border-radius: 16px;
                background-color: var(--color-active-background);
            }

            .loading-user {
                height: 15px;
                width: 30%;
                border-radius: 16px;
                background-color: var(--color-active-background);
            }
        }
    }

}
</style>